<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>测试页面</title>
		<link rel="stylesheet" type="text/css" href="css/comment.css"/>
	</head>
	<body>
		<div class="container">
			<div class="comment_div">
				<h5 class="com_h5" style="font-size: 16px;">文章评论</h5>
				<form id="form0" action="#" method="post" onsubmit="return false">
				<div class="com_top" style="display: flex;flex-wrap: wrap;">
					<div style="flex: 0 0 50%;max-width:50%">
						<div class="com_input_div" style="">
							<label style="">昵称：</label>
							<input class="com_input" type="text" name="username" value="轻微的风">
							<span class="com_tip" style=""><span style="color: red;">*</span> 必填项</span>
						</div>
						<div class="com_input_div" >
							<label style="">邮箱：</label>
							<input class="com_input" type="email" name="email">
							<span class="com_tip" style=""><span style="color: red;">*</span> 必填项</span>
						</div>
						<div class="com_input_div" style="">
							<label style="">网址：</label>
							<input class="com_input" type="text" name="href" placeholder="http://或https://开头哦">
							<span class="com_tip">可选</span>
						</div>
					</div>
					<div style="flex: 0 0 50%;max-width:50%;">
						<div class="com_card" style="display: none;">
							<div class="com_card_left" style="">
								<img class="round" width="65" height="65" avatar="轻微的风" >
							</div>
							<div class="com_card_right" style="">
								<p>name：轻微的风</p>
								<p style="white-space: nowrap;">Email：pmb2020@163.com</p>
								<p>网址：无</p>
							</div>
						</div>
						<div class="create_com" style="height: 100%;width: 100%;">
								<button id="create_btn" class="com_btn" style="">生成名片</button>
						</div>
					</div>
					<div style="flex: 0 0 100%;margin-top: 15px;">
						<div class="com_area_div" style="">
							<textarea name="title" placeholder="欢迎到此一游!">欢迎到此一游！</textarea>
							<input onclick="comment()" class="com_btn" type="submit" name=""  value="发表评论" />
						</div>
					</div>
				</div>
				</form>
				<div class="com_bom">
					<h5 class="com_h5">评论列表</h5>
					<ul class="com_ul">
						<li>
							<img class="round" width="50" height="50" avatar="王先生" color="#0D8ABC">
							<div class="com_right" style="">
								<p class="com_info_top"><a id="name1" href="#">王先生</a><span id="com_zan">赞(15)</span></p>
								<p class="com_info_center" style="">人，终究会有老去的一天。所以，我们应该这样面对生活，面朝大海，春暖花开花开花落。这样，当你回首过去，你会发现，我TM的到底都错过了什么！</p>
								<div class="com_ul_bom">
									<span>45分钟前</span>
									<span id="replay"><a href="javascript:void(0)">回复</a></span>
								</div>
								<!-- <div class="replay_div">
									<input class="com_input" type="text" name="title" id="" value="回复@王先生 : "/>
									<div class="repaly_btn_div">
										<button class="replay_btn">回复</button>
									</div>
								</div> -->
								<!-- 二级评论 -->
								<ul class="com_two">
									<li style="position: relative;">
										<div class="com_two_div">
											<p class="mb5"><a id="name2" href="#">猫小鱼 </a>回复 <a href="#">@王先生</a>：<span>你说的都对！</span></p>
											<div class="com_ul_bom">
												<span>11分钟前</span>
												<span id="replay"><a href="javascript:void(0)" >回复</a></span>
											</div>
											
										</div>
										<!-- <div class="replay_div" style="display: none;">
											<input class="com_input" type="text" name="title" id="" value="回复@王先生 : "/>
											<div class="repaly_btn_div">
												<button class="replay_btn">回复</button>
											</div>
										</div> -->
									</li>
									<li>
										<div class="com_two_div">
											<p class="mb5"><a id="name2" href="#">王先生 </a>回复 <a href="#">@猫小鱼</a>：<span>不知道你在说什么啊？</span></p>
											<div class="com_ul_bom">
												<span>15分钟前</span>
												<span id="replay">回复</span>
											</div>
										</div>
									</li>
									<li>
										<div class="com_two_div">
											<p class="mb5"><a id="name2" href="#">猫小鱼 </a>回复 <a href="#">@王先生</a>：<span>人，终究会有老去的一天。所以，我们应该这样面对生活，面朝大海，春暖花开花开花落。这样，当你回首过去，你会发现，我TM的到底都错过了什么！</span></p>
											<div class="com_ul_bom">
												<span>48秒前</span>
												<span id="replay">回复</span>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</li>
						<li>
							<img class="round" width="50" height="50" avatar="荒漠K先生" color="#15b6e6">
							<div class="com_right" style="">
								<p class="com_info_top"><a id="name1" href="#">荒漠K先生</a><span style="float: right;">顶（18）</span></p>
								<p class="com_info_center" style="">在亿万人海相遇有同样默契是多么不容易，你懂得我的固执我懂你脾气，两颗心在靠近，等不及解释我的心情，怕错过爱上你的时机。浪漫已经准备就全新的旅行多运在最美的年纪遇见你没有遗憾和可惜。</p>
								<div class="com_ul_bom">
									<span>5分钟前</span>
									<span id="replay"><a href="javascript:void(0)">回复</a></span>
								</div>
							</div>
						</li>
						<li>
							<img class="round" width="50" height="50" avatar="Long Bro" color="#94b553">
							<div class="com_right" style="">
								<p class="com_info_top"><a id="name1" href="#">Long Bro</a><span style="float: right;">顶（18）</span></p>
								<p class="com_info_center" style="">人，终究会有老去的一天。所以，我们应该这样面对生活，面朝大海，春暖花开花开花落。这样，当你回首过去，你会发现，我TM的到底都错过了什么！</p>
								<div class="com_ul_bom">
									<span>45分钟前</span>
									<span id="replay"><a href="javascript:void(0)">回复</a></span>
								</div>
							</div>
						</li>
						<li>
							<img class="round" width="50" height="50" avatar="猫小鱼" color="#dc875f">
							<div class="com_right" style="">
								<p class="com_info_top" ><a id="name1" href="#">猫小鱼</a><span style="color: #888;float: right;font-size: 15px;">顶（18）</span></p>
								<p style="text-align: justify;font-size: 15px;color: #666;margin-bottom: 15px;">我喜欢你，就像风走了八万里，不问归期！</p>
								<div class="com_ul_bom">
									<span>48分钟前</span>
									<span id="replay"><a href="javascript:void(0)">回复</a></span>
								</div>
								<!-- 二级评论 -->
								<ul class="com_two">
									<li>
										<div class="com_two_div">
											<p class="mb5"><a id="name2" href="#">Long Bro </a>回复 <a href="#">@猫小鱼</a>：<span>谢谢你对我的喜欢，你是个好人！</span></p>
											<div class="com_ul_bom">
												<span>11分钟前</span>
												<span id="replay">回复</span>
											</div>
										</div>	
									</li>
									<li>
										<div class="com_two_div">
											<p class="mb5"><a id="name2" href="#">猫小鱼 </a>回复 <a href="#">@Long Bro</a>：<span>不要再对我发好人卡了！！！</span></p>
											<div class="com_ul_bom">
												<span>11分钟前</span>
												<span id="replay">回复</span>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</li>
						<li>
							<img class="round" width="50" height="50" avatar="无极剑圣" color="#c9a2ca">
							<div class="com_right" style="">
								<p class="com_info_top"><a id="name1" href="#">无极剑圣</a><span style="float: right;">顶（18）</span></p>
								<p class="com_info_center" style="">一日为艾欧尼亚人,终身为艾欧尼亚人！</p>
								<div class="com_ul_bom">
									<span>45分钟前</span>
									<span id="replay" >回复</span>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	<script src="js/headimg.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/comment.js"></script>
	</body>
</html>